import 'package:flutter/material.dart';

class MyApp17 extends StatelessWidget {
  const MyApp17({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 导航条
      appBar: AppBar(
        title: const Text('GridView初体验',
            style: TextStyle(color: Colors.white, fontSize: 20)),
        backgroundColor: Colors.pink,
        centerTitle: true,
      ),
      // 主体区域
      // 侧轴方向上的个数是固定的(无论是否旋转屏幕)
      body: GridView(
        // 视图代理
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          // 设置侧轴的个数
          crossAxisCount: 3,
          // 设置主轴的间距
          mainAxisSpacing: 10,
          // 设置侧轴的间距
          crossAxisSpacing: 10,
          // 设置宽高比
          childAspectRatio: 4/3
        ),
        children: [
          Container(
              color: Colors.green,
              alignment: Alignment.center,
              child: const Text('黑马程序员1'),
            ),
            Container(
              color: Colors.pink,
              alignment: Alignment.center,
              child: const Text('黑马程序员2'),
            ),
            Container(
              color: Colors.blue,
              alignment: Alignment.center,
              child: const Text('黑马程序员3'),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: const Text('黑马程序员4'),
            ),
            Container(
              color: Colors.cyan,
              alignment: Alignment.center,
              child: const Text('黑马程序员5'),
            ),
            Container(
              color: Colors.green,
              alignment: Alignment.center,
              child: const Text('黑马程序员6'),
            )
        ],
      )
      
    );
  }
}